<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">ID</label>
        <el-input
          v-model="query.id"
          clearable
          placeholder="ID"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">姓名</label>
        <el-input
          v-model="query.patientName"
          clearable
          placeholder="姓名"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">性别</label>
        <el-input
          v-model="query.gender"
          clearable
          placeholder="性别"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">家长姓名</label>
        <el-input
          v-model="query.parent"
          clearable
          placeholder="家长姓名"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">家长联系方式</label>
        <el-input
          v-model="query.parentMobile"
          clearable
          placeholder="家长联系方式"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">主管医生ID，参考 t_doctor</label>
        <el-input
          v-model="query.doctorId"
          clearable
          placeholder="主管医生ID，参考 t_doctor"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">诊所ID</label>
        <el-input
          v-model="query.clinicId"
          clearable
          placeholder="诊所ID"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <label class="el-form-item-label">所属部门</label>
        <el-input
          v-model="query.deptId"
          clearable
          placeholder="所属部门"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        ></el-input>
        <date-range-picker
          v-model="query.birthDay"
          start-placeholder="birthDayStart"
          end-placeholder="birthDayStart"
          class="date-item"
        ></date-range-picker>
        <date-range-picker
          v-model="query.createDate"
          start-placeholder="createDateStart"
          end-placeholder="createDateStart"
          class="date-item"
        ></date-range-picker>
        <rrOperation :crud="crud"></rrOperation>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <div slot="left" class="nav-search">
          <div>
            <el-input
              v-model="query.patientName"
              placeholder="搜索患者姓名/诊所"
              class="icon-search"
            ></el-input>
            <el-date-picker
              v-model="query.createDate"
              :clearable="false"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="病例创建时间日"
            >
            </el-date-picker>
          </div>
          <div>
            <el-button
              class="searchbtn"
              size="mini"
              round
              @click="crud.toQuery"
            >搜索</el-button>
            <el-button
              class="exportbtn"
              size="mini"
              round
              :loading="crud.downloadLoading"
              @click="doExport"
            >导出</el-button>
          </div>
        </div>
      </crudOperation>
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :title="crud.status.title"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="ID">
            <el-input v-model="form.id" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="form.patientName"
              style="width: 370px"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio
              v-for="item in dict.gender"
              :key="item.id"
              v-model="form.gender"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="form.birthDay"
              type="datetime"
              style="width: 370px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="家长姓名">
            <el-input v-model="form.parent" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="家长联系方式">
            <el-input
              v-model="form.parentMobile"
              style="width: 370px"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="form.createDate"
              type="datetime"
              style="width: 370px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="主管医生ID，参考 t_doctor">
            <el-input v-model="form.doctorId" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="诊所ID">
            <el-input v-model="form.clinicId" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-input v-model="form.deptId" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="是否标星收藏，0未收藏，1已收藏">
            <el-input v-model="form.star" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="患者头像URL">
            <el-input v-model="form.photoUrl" style="width: 370px"></el-input>
          </el-form-item>
          <el-form-item label="产品规则">
            <el-input
              v-model="form.productRuleId"
              style="width: 370px"
            ></el-input>
          </el-form-item>
          <el-form-item label="套餐规则">
            <el-input
              v-model="form.packageRuleId"
              style="width: 370px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="是否已归档 0 未归档 1 已归档 已归档普通查询不可见"
          >
            <el-input v-model="form.archived" style="width: 370px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        stripe
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <!-- <el-table-column prop="id" sortable label="ID"></el-table-column> -->
        <el-table-column align="center">
          <template slot-scope="scope">
            <div @click="starFn(scope.row)">
              <i
                v-if="scope.row.star == 0"
                class="el-icon-star-off el-icon"
              ></i>
              <i v-else class="el-icon-star-on el-icon"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="photoUrl" sortable label="患者头像">
          <template slot-scope="scope">
            <img :src="scope.row.photoUrl" class="user-avatar" />
          </template>
        </el-table-column>
        <el-table-column
          prop="patientName"
          sortable
          label="患者姓名"
        ></el-table-column>
        <el-table-column prop="gender" sortable label="性别">
          <template slot-scope="scope">
            {{ dict.label.gender[scope.row.gender] }}
          </template>
        </el-table-column>
        <el-table-column prop="id" sortable label="患者编号"></el-table-column>
        <el-table-column prop="createDate" sortable label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="clinicName"
          sortable
          label="所属诊所"
        ></el-table-column>
        <el-table-column
          fixed="right"
          v-permission="['admin', 'patient:edit', 'patient:del']"
          prop=""
          label="归档"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <img
              v-if="scope.row.archived == 0"
              src="../../assets/images/patient/file.png"
              alt=""
              @click="archiveFn(scope.row.id)"
            />
            <img
              v-else
              src="../../assets/images/patient/back.png"
              alt=""
              @click="archiveBackFn(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
  </div>
</template>

<script>
import { star, archive, download } from "@/api/patient";
import { downloadFile } from "@/utils/index";
import { mapGetters } from "vuex";
import crudPatient from "@/api/patient";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
// import udOperation from '@crud/UD.operation';
import pagination from '@crud/Pagination';

const defaultForm = {
  id: null,
  patientName: null,
  gender: null,
  birthDay: null,
  compliance: null,
  parent: null,
  relationship: null,
  parentProfession: null,
  parentMobile: null,
  orthodonticHis: null,
  createDate: null,
  doctorId: null,
  clinicId: null,
  deptId: null,
  tags: null,
  star: null,
  photoUrl: null,
  productRuleId: null,
  packageRuleId: null,
  archived: null
};
export default {
  name: 'Patient',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: [
    'gender',
    'patient_compliance',
    'patient_parent_rel',
    'patient_archive'
  ],
  //   mounted(){
  // this.initDatasubFn();
  //   },
  cruds() {
    return CRUD({
      title: 'PatientService',
      url: '/patient/queryPage',
      crudMethod: { ...crudPatient },
      query: {
        createDate: '',
        archive: '',
        star: ''
      },
      optShow: {
        add: false,
        del: false,
        edit: false,
        download: false
      },
      sort: "id,desc",
      optRightShow: {
        refresh: false,
        search: false
      }
    });
  },
  computed: {
    ...mapGetters(['searchInfo'])
  },
  watch: {
    searchInfo(newVal, oldVal) {
      if (newVal.code === 'patient:list:all') {
        this.query.archived = '';
        this.query.star = '';
      } else if (newVal.code === 'patient:list:file') {
        this.query.archived = 1;
        this.query.star = '';
      } else {
        this.query.archived = "";
        this.query.star = 1;
      }
      this.crud.toQuery();
    }
  },
  data() {
    return {
      permission: {
        add: ['admin', 'patient:add'],
        edit: ['admin', 'patient:edit'],
        del: ['admin', 'patient:del']
      },
      rules: {},
      queryTypeOptions: [
        { key: 'id', display_name: '病例编号' }
      ],
      serachStr: '',
      createDate: ''
    };
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 收藏
    starFn(row) {
      var searchQuery = {
        patientId: row.id,
        star: row.star === 0 ? 1 : 0,
        doctorId: row.doctorId
      };
      star(searchQuery).then((res) => {
        this.crud.toQuery();
      });
    },
    // 归档患者
    archiveFn(id) {
      archive({ archived: 1, patientIds: [id] }).then((res) => {
        this.crud.toQuery();
      });
    },
    // 还原
    archiveBackFn(id) {
      archive({ archived: 0, patientIds: [id] }).then((res) => {
        this.crud.toQuery();
      });
    },
    searchButton(item) {
      console.warn(item.code, item.name);
    },
    // 导出
    doExport() {
      download(this.crud.getQueryParams())
        .then((result) => {
          console.log(result);
          downloadFile(result, this.crud.title + "数据", "xlsx");
          this.crud.downloadLoading = false;
        })
        .catch(() => {
          this.crud.downloadLoading = false;
        });
    }
  }
};
</script>

<style lang='scss' scoped>
.el-icon {
  font-size: 25px;
}
.nav-search {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  .el-input {
    width: 320px;
    margin-right: 10px;
  }
  .el-date-editor--date {
    width: 150px;
  }
  .el-input {
    width: 200px;
    height: 36px;
    margin-right: 20px;
  }
  >>> .el-input__inner {
    width: 200px;
    height: 36px;
    font-size: 14px;
    padding-right: 30px;
  }
  // >>>.el-input__prefix{
  //     display: none;
  //   }
  .icon-search::after {
    content: "";
    display: block;
    position: absolute;
    height: 24px;
    width: 24px;
    right: 10px;
    top: 6px;
    background: url("../../assets/images/seach.png");
  }
  .icon-calendar::after {
    content: "";
    display: block;
    position: absolute;
    height: 24px;
    width: 24px;
    right: 10px;
    top: 6px;
    background: url("../../assets/images/calendar.png");
  }
  .el-button {
    height: 36px;
    width: 120px;
    font-size: 18px;
    margin-right: 18px;
  }
  .searchbtn {
    background-color: #508fcc;
    border-color: #508fcc;
    color: #fff;
  }
  .exportbtn {
    background-color: #2ec9c7;
    border-color: #2ec9c7;
    color: #fff;
  }
}
.head-container {
  >>> .crud-opts-left {
    width: 100%;
  }

  >>> .crud-opts-right {
    width: auto !important;
  }
}
</style>
